<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-form ref="formRef" :model="formInfo" inline size="small" label-width="100" class="form_class" :rules="rules">
    <el-form-item label="任务名称:" prop="taskName">
      <el-input style="width: 100%;" v-model="formInfo.taskName" clearable placeholder="任务名称" maxlength="50" show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="同步类型:" prop="syncType">
      <el-radio-group disabled v-model="formInfo.syncType">
        <el-radio type="primary" value="OFFLINE_SYNC" size="small">离线同步</el-radio>
        <el-radio type="primary" value="REAL_TIME_SYNC" size="small">实时同步</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="任务类型:" prop="taskType">
      <el-select style="width: 100%;" v-model="formInfo.taskType" clearable filterable @change="selectChange($event)">
        <el-option v-for="(val, key) in props.taskTypes" :key="key" :label="val" :value="key"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="任务描述:">
      <el-input v-model="formInfo.taskDescription" :rows="3" type="textarea" clearable placeholder="任务描述" maxlength="200" show-word-limit></el-input>
    </el-form-item>
  </el-form>
</template>
        
<script name="TaskBaseInfo" setup>
const props = defineProps(['taskType', 'formInfo', 'taskTypes']);
const emits = defineEmits(['handleEvent']);
const formRef = ref();
const realtimeTaskTypes = ref([]);
const offlineTaskTypes = ref([]);
const formInfo = ref({
  taskName: '',
  syncType: props.taskType,
  taskType: '',
  description: ''
})
const rules = reactive({
  taskName: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
  ],
  syncType: [
    { required: true, message: '请选择同步类型', trigger: 'blur' },
  ],
  taskType: [
    { required: true, message: '请选择任务类型', trigger: 'blur' },
  ],
})
const selectChange = (val) => {
  if (val) {
    emits('handleEvent', val)
  }
}
onMounted(() => { 
  props.formInfo && (formInfo.value = props.formInfo);
});
defineExpose({
  formInfo,
  formRef
});
</script>
<style scoped lang="scss">
:deep(.asterisk-left) {
  width: 100%;
}
</style>
